<template>
  <div class="app-container promo-detail-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>

      <el-form-item prop="username">

        <el-input v-model="form.name" placeholder="输入账户名" class="input-with-select" @keyup.enter.native="submitFilterForm">
          <template slot="prepend">
            <el-select v-model="form.userType" class="">
              <el-option v-for="item in consts.ACCOUNT_TYPE_WITHOUT_ALL"
                         :key="item.value"
                         :label="item.title"
                         :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <!--<el-form-item v-if="roleCheck('virtual')" class="with-pre-select" prop="parentName"  label="数据类型">-->
        <!--<el-select v-model="form.isFake">-->
          <!--<el-option v-for="item in consts.STATISTICS_RANGE"-->
                     <!--:key="item.value"-->
                     <!--:label="item.title"-->
                     <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
        <el-button @click="selfResetForm('refForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData"
      v-loading="loading"
      element-loading-text="加载中..."
      show-summary
      :summary-method="getLocalSummaries"
      class="el-table-align-center">
      <el-table-column label="时间" prop="days" width="180" align="center">
      </el-table-column>
      <el-table-column prop="participantsNumber" label="参与人数" align="center"></el-table-column>
      <el-table-column prop="totalNumber" label="参与次数" align="center"></el-table-column>
      <el-table-column prop="totalAmount" label="红利总额" align="center">
        <template slot-scope="{row}">
          {{row.totalAmount | currency}}
        </template>
      </el-table-column>
    </el-table>
    <!--<div class="pagination-container">-->
      <!--<el-pagination-->
        <!--bordered-->
        <!--layout="total, sizes, prev, next"-->
        <!--:disabled="loading"-->
        <!--@size-change="cursorGridSizeChange"-->
        <!--@prev-click="cursorPrevClickChange"-->
        <!--@next-click="cursorNextClickChange"-->
        <!--:current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"-->
        <!--:total="tableData.total">-->
      <!--</el-pagination>-->
    <!--</div>-->

  </div>
</template>


<script>
import { grid, pickerOption } from '@/build';
import {
  promoInfoDetailListApi as listApi,
} from '@/services/api/operationalRealTime';

export default {
  name: 'promo-detail',
  mixins: [grid, pickerOption],
  props: ['rowData'],
  data() {
    const timeRange = this.rowData.time || ['', ''];
    const times = _.toPeriod({
      start: [-1, 'days'],
      end: [0, 'days'],
      format: 'YYYY-MM-DD',
    });
    times.startTime = timeRange[0] ? timeRange[0] : times.startTime;
    times.endTime = timeRange[1] ? timeRange[1] : times.endTime;
    return {
      tableData: [],
      form: {
        actId: this.rowData.actId,
        time: [times.startTime, times.endTime],
        name: null,
        userType: 0,
        // isFake: this.rowData.isFake||0,
      },
      filters: {
        actId: this.rowData.actId,
        stime: moment(times.startTime).valueOf(),
        etime: moment(times.endTime).valueOf() + 86399999,
        // isFake: this.rowData.isFake||0,
      },
      statistic: [
        {
          index: 1,
          prop: 'participantsNumber',
          format: value => <div> {_.currency(value)}</div>,
        },
        {
          index: 2,
          prop: 'totalNumber',
          format: value => <div> {_.currency(value)}</div>,
        },
        {
          index: 3,
          prop: 'totalAmount',
          format: value => <div> {_.currency(value, undefined, 2)}</div>,
        },
      ],
    };
  },
  methods: {
    selfResetForm(formName) {
      this.resetForm(formName);
      const timeRange = this.rowData.time || ['', ''];
      const times = _.toPeriod({
        start: [-1, 'days'],
        end: [0, 'days'],
        format: 'YYYY-MM-DD',
      });
      times.startTime = timeRange[0] ? timeRange[0] : times.startTime;
      times.endTime = timeRange[1] ? timeRange[1] : times.endTime;
      this.form.time = [times.startTime, times.endTime];
      this.form.userType = 0;
      this.form.name = '';
      // this.form.isFake = this.rowData.isFake||0;
    },
    submitFilterForm() {
      const {
        time, name, userType, actId,
      } = this.form;
      let stime;
      let etime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        stime = moment(time[0]).valueOf();
        etime = moment(time[1]).valueOf() + 86399999;
      }
      this.filters = {
        actId, name, userType, stime, etime, project: consts.PLATFROM_PREFIX,
      };
      this.gridSearch();
    },


  },
  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '优惠详情', true) });
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        _.each(data, (item) => {
          item.totalAmount = _.convert2yuan(item.totalAmount);
        });
        return data;
      },
    });
    this.submitFilterForm();
  },

};
</script>

<style lang="scss" >
  .promo-detail-container{
    .el-select .el-input {
      width: 130px;
    }
  }


</style>
